<script lang="ts" setup>
import {
  Delete,
  Edit,
  Plus
} from '@element-plus/icons-vue';
import { ref, reactive } from 'vue'
import DefineComponent from "../utils/App";
// Token的Store
import { useTokenStore } from '@/store/token.js';
const tokenStore = useTokenStore();

DefineComponent();
// 关于商品的操作

import {AdmGoodGetByPageService,GoodDelService,GoodPassService,GoodPassFailService,GoodUpdService} from '@/api/Goodinfo.js';
import { ElMessage, ElMessageBox } from 'element-plus'
// 所有数据的模型
const Goodinfo = ref([
  {
    gid: 1,
    category: "2",
    price: 32.0,
    introduction: "aaa",
    status: 0,
    number: 32,
    username: "zhangqi",
    phone: "18698038688",
    gimage: "http",
    gname: "二手自用",
    // pId: 1  ,
    statustype:'待审核'
    
  },
  {
    gid: 2,
    category: "2",
    price: 32.0,
    introduction: "aaa",
    status: 0,
    number: 32,
    username: "zhangqi",
    phone: "18698038688",
    gimage: "http",
    gname: "二手自用",
    // pId: 2,
    statustype:'待审核'
  },
])

//   这里的数据类型对于后端接参好像没有什么影响，可以直接用string类型 ，可以试试
// 修改数据时的数据模型
const GoodModel = ref({
  id: '',
  name: '',
  image: '',       
  category: '',
  price: '',
  introduction: '',
  status: '',       // 状态
  number: '',        // 数量
  // pId: '',         // 
  createTime: '',     // 可以有后端 创建
  updateTime: '',     
  statustype:''
})

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(5)//每页条数

// 搜索模型
const formInline = reactive({
  gid: '',
})

// 分页查询
const GoodList = async () => {
  let params = {
    page: pageNum.value,
    pageSize: pageSize.value,
    
  }
  console.log('数据条数：' + params.pageSize)
  let result = await AdmGoodGetByPageService(params);

  console.log("返回结果:" + result)
  console.log(result)
  //渲染列表数据
  Goodinfo.value = result.data.rows
  //渲染总条数
  total.value = result.data.total
  //  修改属性名字   管理员页面需要
  //为列表中添加categoryName属性
  for (let i = 0; i < Goodinfo.value.length; i++) {
     let info = Goodinfo.value[i];
      for (let j = 0; j < Goodinfo.value.length; j++) {
          if (info.status === 0) {
             info.statustype = '待审核'
          }else if(info.status === 1){
            info.statustype = '已通过'
          }else{
            info.statustype = '已下架'
          }}}
}

GoodList()

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  GoodList()
}

//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  GoodList()
}

//  修改商品
// 修改弹窗
const dialogUpdVisible = ref(false)

// 展示编辑弹窗 
const showUpdDialog = (row) => {
  dialogUpdVisible.value = true
  // 数据拷贝
  GoodModel.value.id = row.gid;
  GoodModel.value.name = row.gname;
  GoodModel.value.image = row.gimage;
  GoodModel.value.category = row.category;
  GoodModel.value.price = row.price;
  GoodModel.value.introduction = row.introduction;
  GoodModel.value.status = row.status;
  GoodModel.value.number = row.number;
  
}

//  商品审核不通过
const GoodPassFail = (row)=>{
  console.log('商品id:')
  console.log(row.gid)

    // 提示用户  确认框
    ElMessageBox.confirm(
        '是否驳回商品?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //  调用删除接口
            let result = await GoodPassFailService(row.gid)
            ElMessage({
                type: 'success',
                message: '驳回商品成功',
            })
            // 刷新数据页面
            // 调用获取所有文章分类的函数
            GoodList()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '驳回商品失败',
            })
        })
}

//  清空搜索栏
const clear = () => {
  formInline.gid = ''
  
}

// 通过审核
const Success =async (id)=>{
  
  console.log(id)
  let result = await GoodPassService(id)

 // 成功
    if (result.code === 1) {
        ElMessage.success(result.msg ? result.msg : '√')
       
    } else {
        ElMessage.error('失败')
    }
    GoodList()
}

//  修改商品信息
const UpdateGood=async ()=>{

  let result =await GoodUpdService(GoodModel.value)
  // 成功
  if (result.code === 1) {
        ElMessage.success(result.msg ? result.msg : '√')
       
    } else {
        ElMessage.error('失败')
    }
    GoodList()
    dialogUpdVisible.value = false
}

//  上传成功的回调      
const uploadSuccess = (result) => {
  GoodModel.value.image = result.data
  console.log(result.data);

}
</script>


<template>
  <el-card class="">
    <div class="card-header">
      <span>商品信息管理</span>
      <!-- <el-button type="primary"  @click="dialogUpdVisible = true">发布商品</el-button> -->
    </div>
    <div style="margin-top: 20px;">
      <hr>
    </div>
    
    <el-table :data="Goodinfo" style="width: 100%"> 
      <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">商品编号: {{ props.row.gid }}</p>
            <p m="t-0 b-2">商品简介: {{ props.row.introduction }}</p>
            <!-- <p m="t-0 b-2">商品状态: {{ props.row.status }}</p>  -->
            <p m="t-0 b-2">商品库存: {{ props.row.number }}</p>
            <p m="t-0 b-2">用户名: {{ props.row.username }}</p>
            <p m="t-0 b-2">用户联系电话: {{ props.row.phone }}</p>
        </div>
      </template>
    </el-table-column>
     
      <el-table-column label="商品名称" prop="gname" />
      <el-table-column label="图像" prop="gimage" >
        <template #default="{ row }">
        <img :src=row.gimage alt="图片走丢了" style="height: 100px" />
      </template>
      </el-table-column>
      <el-table-column label="商品类别" prop="category" />
      <el-table-column label="价格" prop="price" />
      <el-table-column label="商品状态" prop="statustype" />

      <el-table-column label="操作" width="250">
        <template #default="{ row }">
        <!-- 修改 -->
          <el-button type="primary" :icon="Edit" circle  @click="showUpdDialog(row)" />
       <!-- 审核通过 -->
          <el-button type="primary" round @click="Success(row.gid)">通过</el-button>
          <!-- 不通过 -->
          <el-button type="danger" round @click="GoodPassFail(row)">不符合要求</el-button>
        </template>
      </el-table-column>
    </el-table>
  <!-- 分页条 -->
  <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
      @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />

     <!-- // 修改商品 -->
     <el-dialog v-model="dialogUpdVisible" title="修改商品" width="30%">
      <el-form :model="GoodModel" label-width="100px" style="padding-right: 30px">
        <el-form-item label="商品编号" prop="id">
          <el-input v-model="GoodModel.id" minlength="1" maxlength="10" disabled></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="GoodModel.name" minlength="1" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="image">
          <el-upload class="goodimg-uploader" :auto-upload="true" :show-file-list="false" action="/api/upload"
                        name="image" :headers="{ 'token': tokenStore.token.token }" :on-success="uploadSuccess">
                        <img v-if="GoodModel.image" :src=GoodModel.image alt="图片走丢了" class="goodimg" title="点击图片可以修改图像" />
                        <el-icon v-else class="goodimg-uploader-icon" title="点击图片可以修改图像">
                            <Plus />
                        </el-icon>
                    </el-upload>
          <!-- <el-input v-model="GoodModel.image" minlength="1" maxlength="15"></el-input> -->
        </el-form-item>
        <el-form-item label="商品类别" prop="category">
          <el-input v-model="GoodModel.category" minlength="1" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="GoodModel.price" minlength="1" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="introduction">
          <el-input v-model="GoodModel.introduction" minlength="1" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-input v-model="GoodModel.status" minlength="1" maxlength="15" disabled></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="number">
          <el-input v-model="GoodModel.number" minlength="1" maxlength="15"></el-input>
        </el-form-item>
       
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogUpdVisible = false">取消</el-button>
          <el-button type="primary" @click="UpdateGood"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>


  </el-card>

</template>


<style scoped>
.el-p {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.el-input {
  width: 220px;
}

.el-select {
  width: 220px;
}


.card-header {
  display: flex;
  justify-content: space-between;
}

.goodimg-uploader {
  
  .goodimg {
    width: 178px;
    height: 178px;
    display: block;
  }

  .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.goodimg-uploader-icon {
    font-size: 28px;
    color: #242527;
    width: 150px;
    height: 150px;
    text-align: center;
    background-color: #7779733e;
  }

}
</style>